<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="./css/normal.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>Document</title>
</head>

<body>
    <header>
        黑马面面
    </header>
    <nav>
        <a href=""><img src="./images/icon1.png" alt="">HR面试</a>
        <a href=""><img src="./images/icon1.png" alt="">HR面试</a>
        <a href=""><img src="./images/icon1.png" alt="">HR面试</a>
        <a href=""><img src="./images/icon1.png" alt="">HR面试</a>
        <a href=""><img src="./images/icon1.png" alt="">HR面试</a>
        <a href=""><img src="./images/icon1.png" alt="">HR面试</a>
        <div class="banner"><img src="./images/go.png" alt=""></div>
    </nav>
    <div class="job">
        <div class="job_hd">
            <img src="./images/i2.png" alt="">
            <span>就业指导</span>
            <a href="">更多>></a>
        </div>
        <!-- 轮播图 -->
        <div class="job_bd">
            <!-- Swiper -->
            <div class="swiper-container job_fo">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href=""><img src="./images/pic.png" alt=""></a>
                        <p>老师教你应对面试技巧</p>
                    </div>
                    <div class="swiper-slide">
                        <a href=""><img src="./images/2.jpg" alt=""></a>
                        <p>老师教你应对面试技巧</p>
                    </div>
                    <div class="swiper-slide">
                        <a href=""><img src="./images/3.jpg" alt=""></a>
                        <p>老师教你应对面试技巧</p>
                    </div>
                </div>
                <!-- 添加小圆点的html标签 -->
                <!-- <div class="swiper-pagination"></div> -->
                <!-- 添加左右分页箭头 -->
                <!-- 类名要与js中的一致 -->

            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>

    <div class="study job">
        <div class=" study_hd job_hd">
            <img src="./images/i1.png" alt="">
            <span>充电学习</span>
            <a href="">更多>></a>
        </div>

        <div class=".job_bd study_bd">
            <!-- Swiper -->
            <div class="swiper-container study_fo">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href=""><img src="./images/pic1.png" alt=""></a>
                        <p>说低调英语，告别中式英语</p>
                        <span>157人学习</span>
                    </div>
                    <div class="swiper-slide">
                        <a href=""><img src="./images/pic2.png" alt=""></a>
                        <p>说低调英语，告别中式英语</p>
                        <span>157人学习</span>


                    </div>
                    <div class="swiper-slide">
                        <a href=""><img src="./images/pic1.png" alt=""></a>
                        <p>说低调英语，告别中式英语</p>
                        <span>157人学习</span>


                    </div>
                </div>
                <!-- 添加小圆点的html标签 -->
                <!-- <div class="swiper-pagination"></div> -->
                <!-- 添加左右分页箭头 -->
                <!-- 类名要与js中的一致 -->

            </div>
        </div>
    </div>
    <footer>
        <a href=""><img src="./images/home.png" alt="">
            <p>首页</p>
        </a>
        <a href=""><img src="./images/ms.png" alt="">
            <p>面试技巧</p>
        </a>
        <a href=""><img src="./images/net.png" alt="">
            <p>技术面试</p>
        </a>
        <a href=""><img src="./images/user.png" alt="">
            <p>我的首页</p>
        </a>
    </footer>
    <!-- 引入js文件 -->
    <script src="./js/flexible.js"></script>
    <script src="./js/swiper.min.js"></script>
    <!-- 查看API文档 -->
    <script>
        // 第一个函数是 就业指导轮播图
        (function () {
            var swiper = new Swiper('.job_fo', {
                // 能够显示的slide的个数
                slidesPerView: 3,
                // 每个slide之间的距离
                spaceBetween: 30,
                // 中心位
                centeredSlides: true,
                loop: true,
                // 分页箭头
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                // 小圆点
                // pagination: {
                //     el: '.swiper-pagination',
                //     clickable: true,
                // },
            });
        })();

        // 第二个函数是 学习指导轮播图
        (function () {
            var swiper = new Swiper('.study_fo', {
                // 能够显示的slide的个数
                slidesPerView: 2.5,
                // 每个slide之间的距离
                spaceBetween: 30,
                // 中心位
                // centeredSlides: true,
                loop: false,
            });
        })();
    </script>
</body>

</html>